<template>
  <div class="track-container">
    <ul class="wrapper">
      <li
        v-for="(item, index) in trackList"
        :key="item.id"
        :class="{ track_item: true, active: index === currIndex }"
        @click="choosed"
        :index="index"
      >
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TrackSwitch',
  props: {
    // 默认选项索引
    current: {
      default: 0,
      type: Number
    },
    // 数据列表
    trackList: {
      default: [],
      required: true,
      type: Array
    }
  },
  data() {
    return {
      // 当前被选中的索引
      currIndex: this.current
    };
  },
  methods: {
    choosed(e) {
      let index = Number(e.target.getAttribute('index'));
      if (index == this.currIndex) {
        return;
      }
      this.currIndex = index;
    }
  }
};
</script>

<style lang="less" scoped>
.track-container {
  background-color: #f6f7f8;
  border-radius: 14px;
  color: #61666d;
  display: flex;
  align-items: center;
  position: relative;
  .wrapper {
    .track_item {
      padding: 7px 15px;
      box-sizing: border-box;
      display: inline-block;
      cursor: pointer;
      font-size: 1.4rem;
      user-select: none;
      &:hover {
        background-color: #f1f2f3;
        border-radius: 14px;
      }
      &.active {
        color: #fff;
        background-color: #00aeec;
        border-radius: 14px;
        cursor: default;
        transition: all 0.3s ease-in-out;
      }
    }
  }
}
</style>
